<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动</title>
    <style>
        #circle{
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
            margin-left: 50px;
        }
    </style>
</head>
<body>
        <div id="circle"></div>
        <div>
            <input type="button" name="box" value="移动" onclick="foo()">
        </div>
            <script>
                var timer;
                function foo() {

                    clearInterval(timer);
                    //方法，解除计时器
                    var  s = document.getElementById('circle');
                    var cssobj = window.getComputedStyle(s);


                    console.log(cssobj);
                    console.log(cssobj.marginLeft);
                    function z () {
                        s.style.marginLeft = parseInt(cssobj.marginLeft)+ 5 + 'px';
                    }
                  timer =  setInterval(z,50);            //设置时间间隔, 按照指定时间周期调用函数或计算表达式, 循环
                }
            </script>
</body>
</html>